<script setup lang="ts">
import useRouteStore from '@/store/modules/route';
const router = useRouter();

defineOptions({
  name: 'TransitionLayout'
});
const transitionName = ref('fold-left');
const routeStore = useRouteStore();
let prePosition = history.state.position;
watch(
  () => router.currentRoute.value.path,
  () => {
    if (prePosition < history.state.position) {
      transitionName.value = 'fold-left';
    } else {
      transitionName.value = 'fold-right';
    }
    prePosition = history.state.position;
  }
);
</script>

<template>
  <RouterView v-slot="{ Component, route }" class="router-view" id="routerView">
    <Transition :name="transitionName">
      <KeepAlive :include="routeStore.cacheRoutes">
        <component :is="Component" :key="route.path" />
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

<style lang="scss" scoped>
.router-view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  background: #F7F7F7;
  -webkit-overflow-scrolling: touch;
}
.fold-left-enter-active {
  animation-name: fold-left-in;
  animation-duration: 300ms;
}
.fold-left-leave-active {
  animation-name: fold-left-out;
  animation-duration: 300ms;
}
.fold-right-enter-active {
  animation-name: fold-right-in;
  animation-duration: 300ms;
}
.fold-right-leave-active {
  animation-name: fold-right-out;
  animation-duration: 300ms;
}

@keyframes fold-left-in {
  0% {
    transform: translate(100%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes fold-left-out {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

@keyframes fold-right-in {
  0% {
    transform: translate(-100%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes fold-right-out {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(100%, 0);
  }
}
</style>
